<template>
  <a-spin :spinning="loading">
    <a-result
      v-if="pageState === 'company' && !$hasPermissionSecond('insurance:insuranceService.auditList')"
      status="403"
      title="暂无权限"
      sub-title="您没有商业保险公司端的访问权限"
    >
    </a-result>
    <div v-else-if="pageState === 'customer' && !orderList.length && isInit">
      <div class="no-payslip">
        <img class="autoimg" src="@/assets/img/payslip/beijing.png" />
        <div class="cent">
          <h2>商保服务 全新来袭</h2>
          <h3>办理商保，上传投保人员明细表，实现查看全流程投保审核记录</h3>
          <a-button
            v-if="$hasPermission('insuranceAddService:insuranceAddService.insuranceManager:shangbaobanli')"
            type="primary"
            class="mg_t20"
            @click="goAdd"
          >
            创建商保订单
            <a-icon type="right" />
          </a-button>
        </div>
      </div>
    </div>
    <div v-else class="page-miH">
      <!-- <a-tabs :default-active-key="defaultKey" @change="callback" v-if="pageState === 'company'">
        <a-tab-pane key="0" tab="待核保审核订单"> </a-tab-pane>
        <a-tab-pane key="1" tab="已核保审核订单"> </a-tab-pane>
      </a-tabs> -->
      <div style="display: flex; padding: 8px 0 24px 0" v-if="pageState === 'company'">
        <div style="margin-left: 0" :class="tabButtonWait ? 'tabButton' : 'tabButtonNot'" @click="callback('0')">待核保审核订单</div>
        <div :class="tabButtonAlready ? 'tabButton' : 'tabButtonNot'" @click="callback('1')">已核保审核订单</div>
      </div>
      <div class="pageBox">
        <div>
          <div v-if="pageState === 'customer' || (pageState === 'company' && tabButtonAlready)" class="contentTitle">商保月度统计</div>
          <div v-if="pageState === 'customer' || (pageState === 'company' && tabButtonAlready)" style="display: flex">
            <div class="statisticalBox">
              <div class="statisticalItem" style="justify-content: center">
                <a-button style="color: #a9a9a9" type="link" @click="dateChange(1)"><a-icon type="caret-left" /></a-button>
                <div style="font-size: 24px; font-weight: bold; color: #3c3d43">{{ moment(dynamicDate).format("YYYY-MM") }}</div>
                <a-button style="color: #a9a9a9" type="link" @click="dateChange(2)"><a-icon type="caret-right" /></a-button>
              </div>
              <div class="statisticalItem" style="border-left: 1px solid #e8e8e8; padding-left: 42px">
                <img class="statisticalIcon" src="@/assets/img/payslip/shangbaoIcon1.png" />
                <div style="margin-left: 24px">
                  <div class="label">月成功投保人数</div>
                  <div class="value">{{ topDetail.successInsNumber }}</div>
                </div>
              </div>
              <div class="statisticalItem" style="border-left: 1px solid #e8e8e8; padding-left: 42px">
                <img class="statisticalIcon" src="@/assets/img/payslip/shangbaoIcon2.png" />
                <div style="margin-left: 24px">
                  <div class="label">月度金额合计</div>
                  <div class="value">{{ topDetail.totalAmount }}</div>
                </div>
              </div>
            </div>
            <div
              v-if="pageState === 'company'"
              style="
                display: flex;
                align-items: center;
                padding-left: 42px;
                margin-left: 16px;
                width: 306px;
                height: 100px;
                background: #ffffff;
                border-radius: 8px;
              "
            >
              <img class="statisticalIcon" src="@/assets/img/payslip/cooperationCompany.png" />
              <div style="margin-left: 24px">
                <div style="height: 14px; font-size: 14px; font-weight: 400; color: #a6a8b4">已合作公司</div>
                <div style="font-size: 18px; font-weight: bold; color: #55565d; margin-top: 8px">{{ topDetail.cooperateCompanyCount }}</div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="pageState === 'customer' || (pageState === 'company' && tabButtonAlready)" class="contentTitle">商保列表</div>
        <div class="headBox">
          <div class="selectBox">
            <a-input-search
              allowClear
              v-if="pageState === 'company'"
              v-model="searchForm.customerName"
              placeholder="搜索人资公司"
              style="width: 200px; margin-right: 12px"
              @search="onSearch"
            />
            <a-select
              v-if="pageState === 'customer'"
              allowClear
              placeholder="当前投保状态"
              @change="onSearch"
              v-model="searchForm.state"
              style="width: 200px; margin-right: 12px"
            >
              <a-select-option v-for="(item, index) in selectList" :key="index" :value="item.value">
                {{ item.name }}
              </a-select-option>
            </a-select>
            <a-select
              v-if="pageState === 'company' && defaultKey !== '0'"
              allowClear
              placeholder="当前投保状态"
              @change="onSearch"
              v-model="searchForm.state"
              style="width: 200px; margin-right: 12px"
            >
              <a-select-option v-for="(item, index) in selectListForCompany" :key="index" :value="item.value">
                {{ item.name }}
              </a-select-option>
            </a-select>
            <a-input-search
              allowClear
              v-model="searchForm.schemeName"
              placeholder="搜索保险方案"
              style="width: 200px; margin-right: 12px"
              @search="onSearch"
            />
            <a-input-search
              allowClear
              v-model="searchForm.orderIndex"
              placeholder="搜索订单编号"
              style="width: 200px; margin-right: 12px"
              @search="onSearch"
            />
            <a-popover trigger="click" placement="bottom" style="cursor: pointer">
              <div slot="content" style="width: 785px; height: 80px">
                <a-range-picker
                  valueFormat="YYYY-MM-DD"
                  v-model="rangeDate"
                  style="margin-left: 12px; margin-top: 24px; width: 280px"
                  :placeholder="['保险生效日开始', '保险生效日结束']"
                  @change="onSearch"
                />
                <a-select
                  @change="onSearch"
                  v-model="insCompanyId"
                  style="margin-left: 12px; margin-top: 24px; width: 160px"
                  placeholder="请选择保险公司"
                  :allow-clear="true"
                >
                  <a-select-option v-for="(item, index) in insuranceList" :key="index" :value="item.insCompanyId">{{
                    item.companyName
                  }}</a-select-option>
                </a-select>
                <a-range-picker
                  valueFormat="YYYY-MM-DD"
                  v-model="rangeDate2"
                  style="margin-left: 12px; margin-top: 24px; width: 280px"
                  :placeholder="['保险失效日开始', '保险失效日结束']"
                  @change="onSearch"
                />
              </div>
              <a-button v-if="pageState === 'customer'"><a-icon type="filter" /></a-button>
            </a-popover>
          </div>
          <div class="funcBox">
            <a-button
              type="primary"
              v-if="pageState !== 'company' && $hasPermission('insuranceAddService:insuranceAddService.insuranceManager:shangbaobanli')"
              @click="goAdd"
              ><a-icon type="plus" />新增商保订单</a-button
            >
          </div>
        </div>
        <div class="contentBox" v-if="orderList && orderList.length">
          <div class="orderItem" v-for="(item, index) in orderList" :key="index">
            <div class="top">
              <div style="display: flex; justify-content: space-between">
                <div>
                  <span class="label">订单编号：</span><span class="value">{{ item.id }}</span>
                </div>
                <div>
                  <span class="label">最新提交时间：</span
                  ><span class="value">{{ moment(item.latestSubmitTime).format("YYYY-MM-DD HH:mm:ss") }}</span>
                </div>
              </div>
              <div style="padding: 18px 0; display: flex; justify-content: space-between">
                <div>
                  <div style="display: flex; align-items: center">
                    <div style="font-size: 18px; font-weight: 500; color: #3c3d43">{{ item.schemeName }}</div>
                    <div style="margin-left: 12px">
                      <div
                        :style="[
                          { padding: '0 8px 0 8px' },
                          { height: '22px' },
                          { background: `${selectList[item.state].background}` },
                          { borderRadius: '2px' },
                          { fontSize: '12px' },
                          { border: `1px solid ${selectList[item.state].color}` },
                          { color: `${selectList[item.state].color}` },
                          { textAlign: 'center' },
                          { lineHeight: '20px' }
                        ]"
                      >
                        {{ selectList[item.state].name }}
                      </div>
                    </div>
                  </div>
                  <div style="margin-top: 6px">
                    <span class="label">{{ pageState === "company" ? "人资公司：" : "保险公司：" }}</span
                    ><span class="value">{{ pageState === "company" ? item.customerName : item.companyName }}</span>
                    <span class="label" style="margin-left: 120px">保险周期：</span
                    ><span class="value">{{
                      moment(item.insEffectTime).format("YYYY-MM-DD") + "~" + moment(item.insFailureTime).format("YYYY-MM-DD")
                    }}</span>
                  </div>
                </div>
                <div></div>
                <div>
                  <a-button
                    v-if="
                      ($hasPermission('insuranceAddService:insuranceAddService.insuranceManager:detail') && pageState === 'customer') ||
                      ($hasPermission('insurance:insuranceService.auditList:detail') && pageState === 'company')
                    "
                    type="primary"
                    @click="goDetail(item)"
                    >查看详情</a-button
                  >
                </div>
              </div>
            </div>
            <div v-if="item.state === 3 || item.state === 4 || item.state === 5" class="bottom">
              <div
                style="
                  width: 100%;
                  height: 38px;
                  display: flex;
                  align-items: flex-end;
                  justify-content: space-between;
                  font-size: 14px;
                  font-weight: 400;
                  color: #a6a8b4;
                  padding-bottom: 4px;
                "
              >
                <div>
                  <span class="label">费用合计：</span>
                  <span class="value" style="font-weight: bold">{{ pageState === "company" ? item.actualTotalFee : item.totalFee }}</span>
                </div>
                <a-button style="margin-bottom: -6px" type="link" v-if="!item.foldState" @click="folding(false, item)"
                  ><a-icon type="down" />展开详情</a-button
                >
                <a-button style="margin-bottom: -6px" type="link" v-if="item.foldState" @click="folding(true, item)"
                  ><a-icon type="up" />收起详情</a-button
                >
              </div>
              <div v-if="item.foldState" class="typeBox">
                <div class="typeItem" v-for="(item, index) in item.personTypeList" :key="index">
                  <a-tooltip>
                    <template slot="title">
                      {{ item.typeName }}
                    </template>
                    <div
                      style="
                        font-size: 14px;
                        font-weight: 500;
                        color: #55565d;
                        width: 98px;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                      "
                    >
                      {{ item.typeName }}
                    </div>
                  </a-tooltip>
                  <div class="bottomItem">
                    <span class="label">投保人数：</span><span class="value">{{ item.personCount ? item.personCount : 0 }}人</span>
                  </div>
                  <div class="bottomItem">
                    <span class="label">{{ pageState === "company" ? "实际保险月费：" : "保险月费：" }}</span>
                    <span class="value">{{ pageState === "company" ? item.realityMonthAmount : item.monthAmount }}</span>
                  </div>
                </div>
              </div>
              <!-- <div class="bottomItem">
                <span class="label">投保人数：</span><span class="value">{{ item.insuredNumber }}人</span>
              </div>
              <div class="bottomItem">
                <span class="label">{{ pageState === "company" ? "实际保险月费：" : "保险月费：" }}</span
                ><span class="value">{{ pageState === "company" ? item.realityMonthAmount : item.monthAmount }}</span>
              </div>
              <div class="bottomItem">
                <span class="label">{{ pageState === "company" ? "实际费用总计：" : "费用总计：" }}</span
                ><span class="value">{{ pageState === "company" ? item.actualTotalFee : item.totalFee }}</span>
              </div> -->
            </div>
          </div>
        </div>
        <div v-else style="padding-top: 120px">
          <a-empty />
        </div>
        <div
          v-if="orderList && orderList.length"
          style="width: 100%; display: flex; padding: 24px 0 24px 24px; justify-content: flex-end; align-items: center"
        >
          <a-pagination v-model="current" :pageSize="5" :total="total" @change="onPageChange" />
        </div>
      </div>
    </div>
  </a-spin>
</template>
<script>
import { getOrderList, selectCustomerCompanyConfig, topStatistic } from "./api";
import moment from "moment";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      current: 1,
      total: 0,
      tabButtonWait: true,
      tabButtonAlready: false,
      searchForm: {},
      companyList: [],
      orderList: [],
      loading: false,
      rangeDate: [],
      foldState: 1,
      rangeDate2: [],
      insCompanyId: undefined,
      companyState: undefined,
      insuranceList: [],
      isInit: true,
      defaultKey: "0",
      topDetail: {},
      dynamicDate: moment(moment().format("YYYY-MM"), "YYYY-MM"),
      selectListForCompany: [
        { name: "核保审核不通过", value: "1" },
        { name: "核保审核通过", value: "3" },
        { name: "进行中", value: "4" },
        { name: "已结束", value: "5" }
      ],
      selectList: [
        { name: "待核保审核", value: "0", color: "#4282FF", background: "rgba(66, 130, 255, 0.2)" },
        { name: "核保审核不通过", value: "1", color: "#FA5051", background: "rgba(250, 80, 81, 0.2)" },
        { name: "已撤销", value: "2", color: "#8D8D8D", background: "rgba(171, 171, 171, 0.2)" },
        { name: "核保审核通过", value: "3", color: "#24CDAA", background: "rgba(36, 205, 170, 0.2)" },
        { name: "进行中", value: "4", color: "#FFA600", background: " rgba(255, 166, 0, 0.2)" },
        { name: "已结束", value: "5", color: "#8D8D8D", background: "rgba(171, 171, 171, 0.2)" }
      ]
    };
  },
  computed: {},
  watch: {},
  created() {
    this.pageState = sessionStorage.getItem("shangbaoPageState");
    // this.pageState = this.$route.query.state ? this.$route.query.state : "customer"; // 区分客户端保险公司端page
    this.defaultKey = this.$route.query.defaultKey ? this.$route.query.defaultKey : "0"; // 默认tabs
    if (this.defaultKey === "0") {
      this.tabButtonWait = true;
      this.tabButtonAlready = false;
    } else if (this.defaultKey === "1") {
      this.tabButtonWait = false;
      this.tabButtonAlready = true;
    }
    this.getOrderList();
    if (this.pageState === "customer") {
      this.selectCustomerCompanyConfig(); // 只有客户端的时候拉取保险公司列表（筛选条件）
    }
    this.topStatistic();
  },
  mounted() {},
  methods: {
    topStatistic() {
      topStatistic({
        time: moment(this.dynamicDate).format("YYYYMM"),
        queryType: this.pageState === "customer" ? "customer" : "insuranceCompany"
      }).then((res) => {
        this.topDetail = res.data;
      });
    },
    folding(e, item) {
      this.$set(item, "foldState", e !== true);
    },
    dateChange(e) {
      if (e === 1) {
        this.dynamicDate = moment(this.dynamicDate).subtract(1, "months");
        console.log(moment(this.dynamicDate).format("YYYY-MM"));
        this.topStatistic();
      }
      if (e === 2) {
        this.dynamicDate = moment(this.dynamicDate).subtract(-1, "months");
        console.log(moment(this.dynamicDate).format("YYYY-MM"));
        this.topStatistic();
      }
    },
    callback(e) {
      if (e === "0") {
        this.tabButtonWait = true;
        this.tabButtonAlready = false;
      } else if (e === "1") {
        this.tabButtonWait = false;
        this.tabButtonAlready = true;
      }
      console.log(e);
      this.defaultKey = e; // query记录默认tabs
      const query = JSON.parse(JSON.stringify(this.$router.history.current.query)); // 取当前路由query值并且深拷贝
      const path = this.$router.history.current.path; // 取当前路由地址
      query.defaultKey = this.defaultKey; // 修改变动的query值
      this.$router.push({ path, query }); // 改变query值
      this.getOrderList();
    },
    onSearch() {
      this.current = 1;
      this.isInit = false;
      this.getOrderList();
    },
    onPageChange() {
      // 分页变化
      this.getOrderList();
    },
    // 查询保险公司列表
    selectCustomerCompanyConfig() {
      selectCustomerCompanyConfig().then((res) => {
        this.insuranceList = res.data;
      });
    },
    getOrderList() {
      // 拉取订单列表
      this.loading = true;
      getOrderList({
        pageSize: 5,
        pageNo: this.current,
        ...this.searchForm,
        companyState: this.pageState === "company" ? this.defaultKey : undefined,
        insEffectBeginTime: this.rangeDate.length ? this.rangeDate[0] : undefined,
        insEffectEndTime: this.rangeDate.length ? this.rangeDate[1] : undefined,
        insFailureBeginTime: this.rangeDate2.length ? this.rangeDate2[0] : undefined,
        insFailureEndTime: this.rangeDate2.length ? this.rangeDate2[1] : undefined,
        insCompanyId: this.insCompanyId
      })
        .then((res) => {
          this.orderList = res.data.entities || [];
          this.total = res.data.entityCount;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },
    goAdd() {
      this.$router.push("/shangyebaoxian/client/addClient");
    },
    goDetail(e) {
      this.$router.push({
        path: "/shangyebaoxian/client/detail",
        query: { detail: JSON.stringify(e), pageState: this.pageState }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.page-miH {
  .pageBox {
    padding-right: 24px;
    .statisticalIcon {
      width: 32px;
      height: 32px;
    }
    .statisticalBox {
      width: 100%;
      height: 100px;
      border-radius: 8px;
      background: #ffffff;
      margin-bottom: 24px;
      display: flex;
      padding: 28px 0;
      .statisticalItem {
        width: 33%;
        height: 100%;
        display: flex;
        align-items: center;
      }
      .label {
        height: 14px;
        font-size: 14px;
        font-weight: 400;
        color: #a6a8b4;
      }
      .value {
        font-size: 18px;
        font-weight: bold;
        color: #55565d;
        margin-top: 8px;
      }
    }
    .headBox {
      display: flex;
      justify-content: space-between;
    }
    .contentBox {
      .orderItem {
        width: 100%;
        min-height: 150px;
        background: #ffffff;
        border-radius: 4px;
        margin-top: 18px;
        padding: 24px 24px 0 24px;
        .label {
          height: 14px;
          font-size: 14px;
          font-weight: 400;
          color: #a6a8b4;
        }
        .value {
          font-size: 14px;
          font-weight: 400;
          color: #636572;
        }
        .top {
          height: 68%;
        }
        .bottom {
          min-height: 50px;
          width: 100%;
          border-top: 1px dashed #e8e8e8;
          display: flex;
          align-items: center;
          flex-direction: column;
          .bottomItem {
            // width: 240px;
          }
          .typeBox {
            display: flex;
            justify-content: flex-start;
            width: 100%;
            flex-wrap: wrap;
            padding-bottom: 16px;
            .typeItem {
              width: 31%;
              height: 41px;
              background: #f6f6f6;
              border-radius: 4px;
              margin-top: 16px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 12px;
              margin-right: 18px;
            }
          }
        }
      }
    }
  }
}
.contentTitle {
  font-size: 16px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  border-left: 3px solid var(--primary);
  padding-left: 8px;
  height: 20px;
  line-height: 20px;
  margin-bottom: 20px;
}
.no-payslip {
  position: relative;
  text-align: center;
  margin: auto 0;
  width: 100%;
  height: 300px;
  background-size: 100% 100%;
  .cent {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    h2 {
      color: #42b8d7;
      font-weight: 600;
      font-size: 24px;
    }
    h3 {
      color: #9c9c9c;
    }
  }
}
.autoimg {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.tabButton {
  width: 130px;
  height: 32px;
  background: var(--primary);
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 32px;
  text-align: center;
  color: #ffffff;
  margin-left: 12px;
  cursor: pointer;
}
.tabButtonNot {
  width: 130px;
  height: 32px;
  background: #ffffff;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 32px;
  text-align: center;
  margin-left: 12px;
  cursor: pointer;
}
</style>
